import { ref } from "vue"

export const width = ref<number>(window.innerWidth)
export const height = ref<number>(window.innerHeight)
export const isPC = ref<boolean>(window.innerWidth > 1240)
export const isMobile = ref<boolean>(window.innerWidth <= 768)
export const resizeEffectArray: Array<(isPC: boolean, width: number, height: number) => void> = []

window.addEventListener("resize", () => {
  isPC.value = window.innerWidth > 1240
  isMobile.value = window.innerWidth <= 768
  width.value = window.innerWidth
  height.value = window.innerHeight
  if (resizeEffectArray.length) {
    resizeEffectArray.forEach(effect => effect(isPC.value, width.value, height.value))
  }
})
